let cropper;

// 六、这个页面是编辑和发布公用的所以我们要判断一下到底是通过编辑按钮跳转过来的还是点击发布文章过来的
// 6.1 如果是通过编辑页面跳转过来的,那么我们是可以通过地址栏获取到id的
const id = window.location.search.split('=')[1];
// console.log(id);
// 6.2 如果有id说明是编辑,通过id发送请求,渲染页面的数据
// 注意:下拉框中的数据是动态生成的,所以通过第一步的页面渲染之后,就不会选中
//      此时需要封装成函数,然后等页面下拉框中有值了,再执行这个函数
function getDataArticleById() {
    if (id) {
        getArticleById(id, (res) => {
            // console.log(res);
            // 6.3 给表单进行赋值
            form.val('edit', res.data.data);
            // 6.4 图片需要单独通过layui的方法进行赋值,返回的图片的路径是没有基地址的,需要手动拼接
            const imgUrl = 'http://api-breakingnews-web.itheima.net' + res.data.data.cover_img
            cropper.replace(imgUrl)
        })
    }
}
getDataArticleById()


// 一、进入页面后,先获取所有文章分类的信息,赋值到下拉框中
// 1.1 发送请求
getCates(res => {
    // 1.2 先清空之前的数据
    $('select[name=cate_id]').empty();
    // 1.3 遍历数据
    res.data.data.forEach(item => {
        // 1.3.1 生成模版
        const optionStr = `<option value="${item.Id}" lay-verify="cate">${item.name}</option>`;
        // 1.3.2 追加到下拉框中
        $('select[name=cate_id]').append(optionStr);
        // 1.3.3 手动更新表单元素
        layui.form.render('select', 'edit');
    });
    // 1.3.4 将下拉框中的选项选中到对应的那一类
    // 如果是科技类编辑按钮跳转过来的,那就把下拉框选中到科技类
    getDataArticleById()
})

// 二、富文本框编辑器
function initTinyMce() {
    tinymce.init({
        selector: 'textarea[name=content]', //容器，可使用css选择器
        language: 'zh_CN', //调用放在langs文件夹内的语言包
        plugins: ['link', 'table', 'image'], //选择需加载的插件
        // //选中时出现的快捷工具，与插件有依赖关系
        // quickbars_selection_toolbar: 'bold italic forecolor | link blockquote quickimage',
    });
}
initTinyMce();

// 三、初始化封面
// let cropper; // 通过编辑按钮跳转到该页面时,需要用到,所以声明到最前面
function initCropper() {
    // 1. 集成裁剪插件
    const image = document.getElementById('image'); // 获取到要被添加裁剪插件的图片
    cropper = new Cropper(image, {
        aspectRatio: 1, // 横纵比例
        preview: $(".img-preview")
    });
}
initCropper();

// 四、预览图片
// 4.1 点击上传按钮,触发表单的点击事件
$('.select').on('click', () => {
    $('#file').click()
});
// 4.2 给表单注册onchange事件
$('#file').on('change', (e) => {
    // 4.3 获取图片
    const file = e.target.files[0];
    // 4.4 生成url路径
    const url = URL.createObjectURL(file);
    // 4.5 回显图片
    cropper.replace(url)
})

// 五、注册提交表单事件
$('.layui-form').on('submit', (e) => {
    // 5.1 阻止默认跳转
    e.preventDefault();
    // 5.2 获取表单的值,后台需要formdata格式的值
    let fd = new FormData($('.layui-form')[0]);
    // 5.3 追加富文本框的值和图片
    // 富文本里的东西取出
    const htmlStr = tinyMCE.activeEditor.getContent();
    fd.set('content', htmlStr); // 因为已经有content属性,只需要重新设置,不需要新增,所以不用append
    // 把封面图片的裁剪区域提取出来
    const canvas = cropper.getCroppedCanvas({
        width: 100,
        height: 100
    });
    // 把canvas 转成 File(Blob)文件对象(后台要求) 该方法为异步任务,所以追加属性要写到函数
    canvas.toBlob(function(blobObj) { // blobObj 为处理好的Blob二进制文件
        // 5.4 接着追加图片的值
        fd.append('cover_img', blobObj);
        // 5.5 判断本次的请求是发表文章请求还是编辑请求
        // 如果有id,那就是编辑请求,反之就是发表文章的请求
        if (id) {
            // 5.5.1 编辑请求就比发表请求多添加一个Id属性,通过fd添加
            fd.append('Id', id);
            // 5.5.2 调用api中的编辑文章的请求
            postArticleEdit(fd, (res) => {
                setTimeout(() => {
                    window.location.href = '/iframe/article/list/list.html'
                }, 1000);
            })

        } else {
            // 5.5.3 调用api中的发表文章的请求
            postArticleAdd(fd, res => {
                setTimeout(() => {
                    window.location.href = '/iframe/article/list/list.html'
                }, 1000);
            })
        }
    })
})

// // 0. 因为这个 页面可能是点击发布过来的 / 点击编辑按钮 过来的
// // 如果是点击编辑按钮, url上?后面会有id的参数
// let argStr = location.search;
// let id = argStr.substr(4); // ?id=xxx 我们要后面的id值, 前面?id= 正好4位略过, 从4开始截取后面的id
// if (id) { // 获取文章的详情
//     detailArtAPI(id, res => {
//         // 铺设到页面上
//         layui.form.val("edit", res.data.data);
//         // (1): 下拉菜单的选择问题
//         layui.form.render('select', 'edit');
//         // (2): 让裁剪插件也替换一下
//         cropper.replace(res.data.data.cover_img);
//     })
// }

// // 1. 获取所有的分类 - 铺设到下拉菜单中
// cateListAPI({}, res => {
//     let arr = res.data.data;
//     arr.forEach(obj => {
//         var theOption = `<option value="${obj.Id}" lay-verify="cate">${obj.name}</option>`;
//         $("select[name=cate_id]").append(theOption);
//         // 让layui刷新一下form表单
//         layui.form.render('select', 'edit');
//     })
// })

// // 2. 集成富文本编辑器
// function initTinyMce() {
//     tinymce.init({
//         selector: 'textarea[name=content]', //容器，可使用css选择器
//         language: 'zh_CN', //调用放在langs文件夹内的语言包
//         plugins: ['link', 'table', 'image'], //选择需加载的插件
//         // //选中时出现的快捷工具，与插件有依赖关系
//         // quickbars_selection_toolbar: 'bold italic forecolor | link blockquote quickimage',
//     });
// }
// initTinyMce();

// // 3. 集成图片裁剪的插件
// let cropper;
// function initCropper() {
//     // 1. 集成裁剪插件
//     const image = document.getElementById('image'); // 获取到要被添加裁剪插件的图片
//     cropper = new Cropper(image, {
//         aspectRatio: 1, // 横纵比例
//         //   crop(event) { // 裁剪的事件
//         //     console.log("=========");
//         //     console.log(event.detail.x); // 裁剪插件左上角的x坐标
//         //     console.log(event.detail.y); // ..y坐标
//         //     console.log(event.detail.width); // 裁剪插件的宽高
//         //     console.log(event.detail.height);
//         //     console.log(event.detail.rotate); // 旋转
//         //     console.log(event.detail.scaleX); // 缩放比例
//         //     console.log(event.detail.scaleY);
//         //   },
//         preview: $(".img-preview")
//     });
// }
// initCropper();
// $(".select").on("click", e => { // // input[type=file]标签的样式改不动, 所以我们用button[class=select]按钮来让用户点击
//     $("#file").click();  // JS代码来主动触发input[type=file]的点击事件 - 选择文件的窗口就出来
// })

// // 4. 选择文件窗口出现 - 选中文件点击打开, 会触发change事件
// $("#file").on("change", function (e) {
//     var url = URL.createObjectURL(this.files[0]); // URL是window内置的对象, createObjectURL就是把blob对象(File的父类)转成url地址(浏览器本地的-跟后台无关)
//     cropper.replace(url); // 让cropper重新设置图片url地址以及重新构建cropper
// })

// // 5. 发布文章 - 表单 - 提交事件
// $(".layui-form").on("submit", e => {
//     e.preventDefault();
//     // 富文本里的东西取出(唯一的用activeEditor)
//     var htmlStr = tinyMCE.activeEditor.getContent();
//     // 把封面图片的裁剪区域提取出来
//     var canvas = cropper.getCroppedCanvas({
//         width: 100,
//         height: 100
//     });

//     // 后台要的是FormData数据类型(内容载体)
//     let fd = new FormData($(".layui-form")[0]);
//     fd.set("content", htmlStr); // set(设置值), append(新增)

//     // 把canvas -> File(Blob)文件对象 (异步任务)
//     canvas.toBlob(function (blobObj) {
//         fd.append("cover_img", blobObj);

//         // fd.forEach((value, key) => {
//         //     console.log(value, key);
//         // })

//         if (id) { // 本次是想编辑更新
//             fd.append("Id", id);
//             updateArtAPI(fd, res => {
//                 console.log(res);
//                 setTimeout(() => {
//                     window.location.href = "../list/list.html";
//                 }, 1500);
//             })
//         } else { // 发布新文章
//             // 6. 调用后台 - 发布文章的接口
//             addArtAPI(fd, res => {
//                 // / 在浏览器运行的地址栏上的"根路径"
//                 // . 当前文件夹
//                 // .. 上一级文件夹  (../..)上一级的上一级文件夹
//                 // ./当前文件夹下的什么什么
//                 // ../上一级文件夹下的什么什么
//                 setTimeout(() => {
//                     window.location.href = "../list/list.html";
//                 }, 1500);
//             })
//         }

//     })


// })